<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tpshop-商品</title>
    <link rel="stylesheet" href="./css/list.css">
    <link rel="stylesheet" href="./css/pagination.css">
</head>
<body>
    <div class="head">
        
    </div>
    <div class="search-box">
        <div class="w1430">
            <div class="search-box-l" >
                <a href="">全部结果</a>
                <i></i>
                <a href="">手机</a>
                <i></i>
            </div>
            <div class="seaech-box-r">
                <a href="">清空筛选条件</a>
            </div>
        </div>
    </div>
    <div class="search-opt">
        <div class="w1430">
            <div class="opt-list">
                <dl class="opt-list-t">
                    <dd>品牌</dd>
                    <dt>
                        <a href="#"><img src="./img/shoujipinpai.png" alt=""></a>
                        <a href="#"><img src="./img/shoujipinpai.png" alt=""></a>
                        <a href="#"><img src="./img/shoujipinpai.png" alt=""></a>
                    </dt>
                    <a href="">
                        <span>多选</span>
                        <i></i>
                    </a>
                </dl>
                <dl class="opt-list-b">
                    <dd>价格</dd>
                    <dt>
                        <a href="#">1388元一下</a>
                    </dt>
                    <form action="">
                        <input type="text">
                        <span>-</span>
                        <input type="text">
                        <input type="submit" value="确定">
                    </form>
                </dl>
                <p class="over"><a href="" class="font">更多选项</a></p>
            </div>
        </div>
    </div>
<!-- ******************************* -->
    <div class="shop-list-tour">
        <div class="w1430 ">
            <div class="shop-left">
                <div class="tjhot">
                    <h3 class="font">推荐热卖</h3>
                </div>
                <div class="tjhot-shoplist">
                    <div class="alone-shop">
                        <a href=""><img src="./img/shouji.png" alt=""></a>
                        <p><a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a></p>
                        <p><span>&yen;</span><span>1688.00</span></p>
                        <p><a href="">非凡一度</a></p>
                    </div>
                    <div class="alone-shop">
                        <a href=""><img src="./img/shouji.png" alt=""></a>
                        <p><a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a></p>
                        <p><span>羊</span><span>1688.00</span></p>
                        <p><a href="">非凡一度</a></p>
                    </div>
                </div>
                <!-- <div class="xlranking">
                    <h3 class="font">销量排行</h3>
                </div>
                <div class="xlranking-list"></div> -->
            </div>
            <!-- 列表右边 -->
            <div class="shop-right">
                <!-- 右边的第一部分 -->
               <div class="shop-right-top">
                   <ul class="rank">
                       <li style="color: #fff ;background-color:red;">综合</li>
                       <li>销量</li>
                       <li class="price">
                           价格<i></i>
                        </li>
                       <li>评论</li>
                       <li>新品</li>
                   </ul>
                   <div>
                       <p>共<span>24</span>个商品</p>
                       <div>
                           <i style="margin-right: 5px;"><</i>
                           <p><span>1</span>/<span>2</span></p>
                           <i style=" margin-left: 5px;">></i>
                       </div>
                   </div>
               </div>
               <!-- 右边第二部分 -->
               <div class="shop-right-topb">
                   <ul >
                       <li>
                           <a href="#">
                               <i></i>猎豹商城自营
                           </a>
                       </li>
                       <li>
                           <a href="#">
                               <i></i>好货推荐
                           </a>
                       </li>
                       <li>
                           <a href="#">
                               <i></i>优惠促销
                           </a>
                       </li>
                       <li>
                           <a href="#">
                               <i></i>限时好货
                           </a>
                       </li>
                   </ul>
               </div>
               <!-- 右边的商品列表 -->
               <div class="shop-list">
                   <!-- <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <div><img src="./img/xiaoshouji1.png" alt=""></div>
                           <div><img src="./img/xiaoshouji1.png" alt=""></div>
                           <div><img src="./img/xiaoshouji1.png" alt=""></div>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl> -->
                   <!-- <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl>
                   <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl>
                   <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl>
                   <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl>
                   <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl>
                   <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl>
                   <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl>
                   <dl>
                       <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                       <dd>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji2.png" alt=""></a>
                           <a href="#"><img src="./img/xiaoshouji1.png" alt=""></a>
                       </dd>
                       <dd>
                           <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                          
                       </dd>
                       <dd>
                        <a href="">荣耀9青春版 全网通 标配版 3GB+32GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待</a>
                       </dd>
                       <dd>
                         <input type="text">
                         <div>
                             <i></i>
                             <em></em>
                         </div>
                         <a href="#">加入购物车</a>
                       </dd>
                   </dl> -->
                  <!-- <p>对不起，没有该商品</p> -->
             
               </div>
               <div class="pagination">
                这里是分页
            </div>
            </div>
        </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="guess-like">
        <div class="w1430">
            <div class="like-title">
                <p>猜你喜欢</p>
                <div class="change"><span></span> 换一换</div>
            </div>
            <div class="like-list">
                <dl>
                    <dt><a href="#"><img src="./img/fuzhuang.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/fuzhuang.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/fuzhuang.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/fuzhuang.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/fuzhuang.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/fuzhuang.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/fuzhuang.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/shouji.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="#"><img src="./img/fuzhuang.png" alt=""></a></dt>
                    <dd>
                        <a href="#">猜你喜欢的衣服啦啦啦啦啦零零零零</a>
                    </dd>
                    <dd>
                        <span>&yen;<i>1899.00</i></span>
                           <del>&yen;<i>1999</i> </del>
                    </dd>
                </dl>
               
            </div>
        </div>
    </div>
    
    <div class="bottom"></div>
<div class="cart">
    <div class="cart title">温馨提示</div>
    
</div>

</body>
<!-- <script src="./libs/jquery.js"></script>
<script src="./libs/jquery.cookie.js"></script> -->

<script src="./libs/require.js" data-main="./js/listMain"></script>
<script src="./libs/jquery.js"></script>
<script src="./libs/jquery.pagination.js"></script>

<script>
    
    // $('.pagination').pagination(20,{
    //             items_per_page:2,
    //         num_display_entries:3,
    //         num_edge_entries:2,
    //         current_page: 5,
    //         callback:(abc)=>{
    //             console.log(abc)
    //         }
    //         })
    var str='华为大大大哈哈哈季后赛手机五五哈哈哈'
    console.log(str)
</script>
</html>